function makeElement(data) {
    let e = document.createElement("span");
    e.innerText = data.original;
    e.className = "word";
    elementEvent(e, data);
    return e;
}

function elementEvent(element, data) {
    let clicked = false;
    element.onmouseover = (() =>  {
        element.className = "word_selected";
        element.innerText = data.after;
    })
    element.onmouseout = (() => {
        if (clicked) return;
        element.className = "word";
        element.innerText = data.original;
    })
    element.onclick = (() => {
        clicked = !clicked;
        if (clicked) {
            element.className = "word_selected";
            element.innerText = data.after;
        } else {
            element.className = "word";
            element.innerText = data.original;
        }
    })
}

function clearChildren(element)
{
    while(element.hasChildNodes()) //当div下还存在子节点时 循环继续
    {
        element.removeChild(element.firstChild);
    }
}

function callback(result) {
    let container = document.getElementById("result");
    clearChildren(container);

    for (let i=0; i < result.length; i++) {
        container.appendChild(makeElement(result[i]));
    }
}

export {
    callback
}